import React from 'react';
import './TeamOrderList.css'
import { Table, Pagination } from 'antd';
import {observer,inject} from 'mobx-react'
import {withRouter} from 'react-router-dom'
import * as api from '../../../utils/api'
import axios from '../../../utils/http'
@inject('curOrder')
@observer
class Teamorderlist extends React.Component {
    constructor(){
        super()
        this.state = {
            columns:[
                {
                    title: '团购编号',
                    dataIndex: 'bulkOid',
                    align:'center',
                },
                {
                  title: '团购商品',
                  dataIndex: 'goodsName',
                  align:'center',
                  render:(text,record,indext)=>{
                      return(
                          <div>
                              {record.goods.goodsName}
                          </div>
                      )
                  }
                },
                {
                  title: '团长',
                  dataIndex: 'bulkLider',
                  align:'center',
                },
                {
                  title: '团购人数',
                  dataIndex: 'groupPnum',
                  align:'center',
                },
                {
                  title: '还差人数',
                  dataIndex: 'bulkLp',
                  align:'center',
                },
                {
                  title: '拼团时间',
                  dataIndex: 'groupTime',
                  align:'center',
                  render:(text,record,index)=>{
                      return(
                          <div>
                              <div>
                                    {new Date(record.groupBtime).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                              </div>
                              <div>
                                  {new Date(record.groupEtime).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                              </div>
                          </div>
                      )
                  }
                },
                {
                    title: '拼团状态',
                    dataIndex: 'bulkStatus',
                    align:'center',
                    render:(text,record,index)=>{
                        let bulkStatuNum = record.bulkStatus
                        switch(bulkStatuNum){
                            case 1:bulkStatuNum = "待付款";break;
                            case 2:bulkStatuNum = "拼团中";break;
                            case 3:bulkStatuNum = "拼团成功";break;
                            case 4:bulkStatuNum = "拼团失败";break;
                            case 5:bulkStatuNum = "拼团失败(待退款)";break;
                            default:bulkStatuNum = "拼团失败(已退款)";
                        }
                        return(
                            <div>
                                {bulkStatuNum}
                            </div>
                        )
                    }
                },
                {
                  title: '操作',
                  dataIndex: 'operation',
                  width:'16rem',
                  align:'center',
                  render: (text, record, index) =>{
                    // console.log(record)
                      return (
                          <div>
                            <span onClick={()=>this.openCurHandle(record)} className="checkBtn">查看</span>
                          </div>
                      )
                  }
                },
            ],
            data:[
                {
                    key: 0,
                    teamOrderId:0,
                    teamOrderNum: `2017051420170514`,
                    teamStartTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamEndTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamLeader: `杨雪`,
                    teamSumPeople:6,
                    quePeopleNum:4,
                    teamState:'拼团中',
                    goodName:"凯特芒",
                },
                {
                    key: 1,
                    teamOrderId:1,
                    teamOrderNum: `2017051420170514`,
                    teamStartTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamEndTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamLeader: `杨雪`,
                    teamSumPeople:6,
                    quePeopleNum:4,
                    teamState:'拼团中',
                    goodName:"新疆葡萄",
                },
                {
                    key: 2,
                    teamOrderId:2,
                    teamOrderNum: `2017051420170514`,
                    teamStartTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamEndTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamLeader: `杨雪`,
                    teamSumPeople:6,
                    quePeopleNum:4,
                    teamState:'拼团中',
                    goodName:"水蜜桃",
                },
                {
                    key: 3,
                    teamOrderId:3,
                    teamOrderNum: `2017051420170514`,
                    teamStartTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamEndTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    teamLeader: `杨雪`,
                    teamSumPeople:6,
                    quePeopleNum:4,
                    teamState:'拼团中',
                    goodName:"迪奥口红",
                },
            ],
            curPageData:[],
            curPage:1,
            curPageSize:3,
            toTeamDetail:false,
            teamBianHao:'',//查询 团购编号
            teamZhuangTai:0,//查询 团购状态
        };
    }
    componentDidMount(){
        this.getTeamListAxiosData()
    }
    getTeamListAxiosData = ()=>{
    let _this = this
        // 向后台请求订单列表的数据
        axios({
            url:api.GET_QUERYGROUPBUYLIST,
            method:'GET',
        }).then(data=>{
            // console.log(data.data.data)
            let dataArr = data.data.data
            dataArr = dataArr.map((item,i)=>{
                item.key = i
                return item
            })
            let curPage = 1
            let curPageSize = 3
            let start = (curPage-1)*curPageSize
            let end = start + curPageSize
            let curPageData = dataArr.slice(start,end)
            _this.setState({
                curPage:curPage,
                curPageSize:curPageSize,
                curPageData:curPageData,
                data:dataArr
            })
        })
  }

  //奇偶行的样式
  getRowClassName = (record, index) => {
    let className = '';
    className = index % 2 === 0 ? 'oddRowStyle' : 'evenRowStyle';
    return className;
  }   
  //查看当前行信息   
  openCurHandle = (curRowData)=>{
    // console.log(curRowData)
    /* 在mobx和本地存储中保存当前行的团购ID */
    console.log('进入团购详情')
    this.props.curOrder.changeCurTeam(curRowData.bulkId)
    this.props.history.push('/Home/dingDan/Teamorderlist/TeamOrderDetail')
  }
  // 页码改变的时候   
  pageNumChange = (page,pageSize)=>{
    let start = (page-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:page,
        curPageData:curPageData
    })
  }
 //跳到首页
 toPageStart = ()=>{
    let curPage = 1
    let start = (curPage-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:curPage,
        curPageData:curPageData
    })
 }   
// 跳转到尾页
toPageEnd = ()=>{
    let totalPage = Math.ceil(this.state.data.length/this.state.curPageSize)
    let start = (totalPage-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:totalPage,
        curPageData:curPageData
    })
}
changeTeamBianHao = (e)=>{
    this.setState({
        teamBianHao:e.target.value
    })
}
changeTeamZhuangTaiSearch = (e)=>{
    this.setState({
        teamZhuangTai: parseFloat(e.target.value)
    })
}
//按钮团购状态筛选查询
searchTableByBtn = (obj)=>{
    if(obj === 0){
        this.getTeamListAxiosData()
    }else{
        new Promise((resolve,reject)=>{
            this.setState({
                teamBianHao:'',
                teamZhuangTai:obj,
            })
            resolve()
        }).then(()=>{
            this.searchAxios()
        })
    }
}
// 搜索筛选查询
searchTeam = ()=>{
    // 判断团购编号或者团购状态不为空时有查询结果
    // console.log(this.state.teamBianHao)
    // console.log(this.state.teamZhuangTai)
    if(this.state.teamBianHao!=='' || this.state.teamZhuangTai!==0){
        this.searchAxios()
    }
}
searchAxios = ()=>{
    axios({
        url:api.GET_GROUPBUYLISTBYCODEANDSTATUS,
        method:'GET',
        params:{
            bulk_oid:this.state.teamBianHao,
            bulk_status:this.state.teamZhuangTai
        }
    }).then(data=>{
        // console.log(data.data.data)
        let dataArr = data.data.data
        dataArr = dataArr.map((item,i)=>{
            item.key = i
            return item
        })
        let curPage = 1
        let curPageSize = 3
        let start = (curPage-1)*curPageSize
        let end = start + curPageSize
        let curPageData = dataArr.slice(start,end)
        this.setState({
            curPage:curPage,
            curPageSize:curPageSize,
            curPageData:curPageData,
            data:dataArr
        })
    })
}
    render(){
        return (
            <div>
                <div className="teamOrderBoxClass">
                <h1>团购列表</h1>
                <div className="tabClass">
                    <ul>
                        <li onClick={()=>this.searchTableByBtn(0)}>全部</li>
                        <li onClick={()=>this.searchTableByBtn(1)}>待付款</li>
                        <li onClick={()=>this.searchTableByBtn(2)}>拼团中</li>
                        <li onClick={()=>this.searchTableByBtn(3)}>拼团成功</li>
                        <li onClick={()=>this.searchTableByBtn(4)}>拼团失败(待退款)</li>
                        <li onClick={()=>this.searchTableByBtn(5)}>拼团失败(已退款)</li>
                    </ul>
                </div>

                {/*  筛选查询  */}
                <div className="searchClass toInlineBlock">
                    <label>团购编号 <input type="text" name="teamNum" onChange={this.changeTeamBianHao}/></label>
                    团购状态
                    <select name="" id="" onChange={this.changeTeamZhuangTaiSearch}>
                        <option value={0}>请选择</option>
                        <option value={1}>待付款</option>
                        <option value={2}>拼团中</option>
                        <option value={3}>拼团成功</option>
                        <option value={4}>拼团失败</option>
                        <option value={5}>拼团失败(待退款)</option>
                        <option value={6}>拼团失败(已退款)</option>
                    </select>
                    <button type="button" className="searchBtn" onClick={this.searchTeam}>搜索</button>
                </div>
                <Table columns={this.state.columns} dataSource={this.state.curPageData} pagination={false} rowClassName={this.getRowClassName}/>

                <div className="pagenationbox clearFloat">
                    <div className='pageNation'>
                        <div className='clearFloat'>
                            <div className='floatLeft'>
                        <Pagination
                            className='purpleTxt'
                            total={this.state.data.length}
                            defaultCurrent={this.state.curPage}
                            defaultPageSize={this.state.curPageSize}
                            current={this.state.curPage}
                            showTotal={total => `共${Math.ceil(this.state.data.length/this.state.curPageSize)}页${total}条记录`}
                            onChange={this.pageNumChange}
                        />
                    </div>
                                <div className="pageBtnBox">
                                    <span className="checkBtn" onClick={this.toPageStart}>首页</span>
                                    <span className="checkBtn" onClick={this.toPageEnd}>尾页</span>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            </div>
             );
    }
}
export default withRouter(Teamorderlist);